<template>
  <div class="boxs">
    <div class="box">
      <div class="zhezhao" v-if="!articals.tatal > 0">
        <p>加载中<i>  ......</i></p>
      </div>
      <ul
        class="article_box"
        v-for="items of articals.result"
        :key="items.id"
      >
        <li class="class" :title="items.tags">{{items.tags}}</li>
        <li class="title"  @click="qian" ref="qians">{{items.title}}</li>
        <li class="intros">{{items.summary}}</li>
        <li class="user">
          <span class="s">{{items.nickname}}</span>
          <span class="ss">{{items.createTime}}</span>
          <div class="span_box">
            <span class="iconfont s1">{{'&#xe693;  '+ items.viewSize}}</span>
            <span class="iconfont s2">{{'&#xe605;  '+ items.zanSize}}</span>
            <span class="iconfont s4">{{'&#xe616;  '+ items.commentSize}}</span>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { getArticalSmall } from 'com/shuju.js'
import { mapState } from 'vuex'
export default {
  name: 'ArticalMain',
  methods: {
    qian () {
      var id
      for (let i = 0; i < this.$refs.qians.length; i++) {
        if (event.target === this.$refs.qians[i]) {
          id = this.articals.result[i].id
        }
      }
      getArticalSmall(id, this)
    }
  },
  computed: {
    ...mapState({
      articals: 'artical'
    })
  }
}
</script>

<style lang="stylus" scoped>
  .boxs{
    position: relative
    width: 800px
    margin-top: 1.5rem
    height: auto
    float: left
    .box{
      height: auto
      width: 800px
      .zhezhao{
        position: absolute
        width: 100%
        height: 100%
        background-color: rgb(245,250,254)
        z-index: 5
        p{
          font-size: .6rem
          color: rgb(120,120,120)
          font-weight: bold
          margin: 40% 0
          text-align: center
        }
        i{
          animation: 1.5s linear infinite loading
        }
        @keyframes  loading {
          0%{
            opacity: 1
          }
          25%{
            opacity: .5
          }
          50%{
            opacity: 0
          }
          75%{
            opacity: .5
          }
          100%{
            opacity: 1
          }
        }
      }
      .article_box{
        position: relative
        list-style: none
        padding: 0
        margin: 0
        width: auto
        height: auto
        margin-top: .25rem
        border: 1px solid rgb(230,230,230)
        background-color: rgb(255,255,255)
        box-shadow: 0 0 1.5px rgb(220,220,220)
        transition: box-shadow .5s
        .class{
          position: absolute
          right: 15px
          width: 100px
          height: 20px
          font-size: .4rem
          font-weight: 500
          font-family: 'Kozuka Mincho Pr6N H'
          color: white
          cursor: default
          overflow: hidden
          text-overflow: ellipsis
          white-space: nowrap
          text-align: center
          background-color: rgb(15,113,213)
          padding: .3rem
        }
        .title{
          cursor: pointer
          font-size: .5rem
          padding: .3rem
          width: 600px
          height: 30px
          color: rgb(15,60,213)
        }
        .intros{
          padding: .3rem
          padding-top: 0
          color: rgb(120,120,120)
          width: 600px
          height: 60px
          line-height: .4rem
          letter-spacing: 1px
        }
        .user{
          position: relative
          padding-left: .3rem
          padding-right: .3rem
          padding-top: .2rem
          font-weight: bolder
          color: rgb(60,60,60)
          width: 600px
          height: 30px
          .s{
            color: rgb(210,49,10)
          }
          .ss{
            position: absolute
            left: 260px
          }
          .span_box{
            position: absolute
            top: 10px
            right: -40px
            width: 300px
            font-weight: 100
            span + span{
              margin-left: 30px
            }
          }
        }
      }
    }
    .pages{
      list-style: none
      padding: 0
      margin: 0
    }
    .article_box:hover{
      box-shadow: 2px 2px 5px rgb(150,150,150)
    }
  }
</style>
